<template>
	<view class="content" style="background: url(https://pd.pdaxiang.com/upload/static/index/bj.png) no-repeat;">
		<!-- <image class="donghua" src="https://pd.pdaxiang.com/upload/static/index/donghua.gif"></image> -->
		<view class="hezi_img flexs">
			<image class="donghua" :src="cover_pic" v-if="shopStatus==true"></image>
		<!-- 	<image class="luodi" src="https://pd.pdaxiang.com/upload/static/index/open.gif" v-if="luodistatus==true"></image>
			<image class="dakai" src="https://pd.pdaxiang.com/upload/static/index/open.gif" v-if="openStatus==true"></image> -->
		</view>
		<!-- <fireworks v-if="openStatus==true" style="margin-top: 130rpx;" /> -->
		<image class="openimg" src="https://pd.pdaxiang.com/upload/static/index/luodi.gif" v-if="openStatus==true"></image>
	</view>
</template>

<script>
// import fireworks from '@/components/sanshui-fireworks/sanshui-fireworks.vue'
export default {
	// components: {
	// 	fireworks
	// },
	data() {
		return {
			box_id: '',
			istype: '',
			order_id: '',
			cover_pic: '',
			// luodistatus:true,
			// openStatus:false,
			shopStatus:false,
			num:0,
			detailType:"",
			iconurl:this.$configs.urls
		};
	},
	onLoad(e) {
		////console.log('img',e.cover_pic)
		this.box_id = e.box_id;
		this.order_id = e.order_id;
		this.cover_pic = e.cover_pic;
		if(e.detailType){
			this.detailType = e.detailType
		}
		this.num = e.num
			// this.luodistatus = false;
			this.shopStatus = true
			setTimeout(()=>{
				// this.luodistatus = false;
				this.openStatus = true
				this.shopStatus = false
				setTimeout(()=>{
					uni.redirectTo({
						url:"/orderPage/index/lucksuc?box_id=" + this.box_id + '&order_id=' + this.order_id + '&num=' + this.num + '&detailType=' + this.detailType
					})
				},1100)
			},1500)
			 clearTimeout();
	},
	onShow() {},
	methods: {},
	onBackPress(e){
	  ////console.log("监听返回按钮事件",e);
	  if(e.from=="backbutton"){
		  return true;
	  }
	},
};
</script>

<style lang="scss" scoped>
.content {
	background-size: 100% 100% !important;
	min-height: 100vh;
	background: #000;
	padding-top: 40rpx;
	.openimg{
		// width: 750rpx;
		// height: 700rpx;
		width: 550rpx;
		height: 500rpx;
		position: absolute;
		left: 100rpx;
		top: 460rpx;
	}
	.hezi_img {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		
		.luodi {
			width: 750rpx;
			height: 700rpx;
			position: absolute;
			left: 0;
			top: 420rpx;
			z-index: 2;
		}
		.donghua {
			width: 500rpx;
			height: 400rpx;
			position: absolute;
			left: 100rpx;
			top: 260rpx;
			z-index: 1;
		}
	}

	.hezi_img {
		animation: ldx-metronome 2s linear;
		animation-delay:0.2s
		// animation: ldx-metronome  0.6s  linear
	}
	@keyframes ldx-metronome {
		0% {
			opacity: 0.6;
			transform: scale(0.4);
		}
		5% {
			transform: scale(1.0);
		}
		30% {
			transform: scale(1.1);
		}
				
		0% {
		    transform: translate(0px, 0) rotate(0deg);
		}
		1% {
		    transform: translate(-2px, 0) rotate(-1deg);
		}
		2% {
		    transform: translate(4px, 0) rotate(2deg);
		}
		3% {
		    transform: translate(-6px, 0) rotate(-3deg);
		}
		4% {
		    transform: translate(8px, 0) rotate(4deg);
		}
		5% {
		    transform: translate(-10px, 0) rotate(-5deg);
		}
		6% {
		    transform: translate(12px, 0) rotate(6deg);
		}
		7% {
		    transform: translate(-14px, 0) rotate(-7deg);
		}
		8% {
		    transform: translate(16px, 0) rotate(8deg);
		}
		9% {
		    transform: translate(-18px, 0) rotate(-9deg);
		}
		10% {
		    transform: translate(20px, 0) rotate(8deg);
		}
		11% {
		    transform: translate(-22px, 0) rotate(-8deg);
		}
		12% {
		    transform: translate(24px, 0) rotate(8deg);
		}
		13% {
		    transform: translate(-26px, 0) rotate(-8deg);
		}
		14% {
		    transform: translate(28px, 0) rotate(8deg);
		}
		15% {
		    transform: translate(-30px, 0) rotate(-8deg);
		}
		16% {
		    transform: translate(32px, 0) rotate(8deg);
		}
		17% {
		    transform: translate(-34px, 0) rotate(-8deg);
		}
		18% {
		    transform: translate(36px, 0) rotate(8deg);
		}
		19% {
		    transform: translate(-38px, 0) rotate(-8deg);
		}
		20% {
		    transform: translate(40px, 0) rotate(8deg);
		}
		21% {
		    transform: translate(-42px, 0) rotate(-8deg);
		}
		22% {
		    transform: translate(44px, 0) rotate(8deg);
		}
		23% {
		    transform: translate(-46px, 0) rotate(-8deg);
		}
		24% {
		    transform: translate(48px, 0) rotate(8deg);
		}
		25% {
		    transform: translate(-30px, 0) rotate(-8deg);
		}
		26% {
		    transform: translate(32px, 0) rotate(8deg);
		}
		27% {
		    transform: translate(-34px, 0) rotate(-8deg);
		}
		28% {
		    transform: translate(36px, 0) rotate(8deg);
		}
		29% {
		    transform: translate(-38px, 0) rotate(-8deg);
		}
		30% {
		    transform: translate(20px, 0) rotate(8deg);
		}
		31% {
		    transform: translate(-22px, 0) rotate(-8deg);
		}
		32% {
		    transform: translate(24px, 0) rotate(8deg);
		}
		33% {
		    transform: translate(-26px, 0) rotate(-8deg);
		}
		34% {
		    transform: translate(28px, 0) rotate(8deg);
		}
		35% {
		    transform: translate(-30px, 0) rotate(-8deg);
		}
		36% {
		    transform: translate(32px, 0) rotate(8deg);
		}
		37% {
		    transform: translate(-34px, 0) rotate(-8deg);
		}
		38% {
		    transform: translate(36px, 0) rotate(8deg);
		}
		39% {
		    transform: translate(-38px, 0) rotate(-8deg);
		}
		40% {
		    transform: translate(40px, 0) rotate(8deg);
		}
		41% {
		    transform: translate(-42px, 0) rotate(-8deg);
		}
		42% {
		    transform: translate(44px, 0) rotate(8deg);
		}
		43% {
		    transform: translate(-46px, 0) rotate(-8deg);
		}
		44% {
		    transform: translate(48px, 0) rotate(8deg);
		}
		45% {
		    transform: translate(-50px, 0) rotate(-8deg);
		}
		46% {
		    transform: translate(52px, 0) rotate(8deg);
		}
		47% {
		    transform: translate(-54px, 0) rotate(-8deg);
		}
		48% {
		    transform: translate(56px, 0) rotate(8deg);
		}
		49% {
		    transform: translate(-58px, 0) rotate(-8deg);
		}
		50% {
		    transform: translate(60px, 0) rotate(8deg);
		}
		51% {
		    transform: translate(-62px, 0) rotate(-8deg);
		}
		52% {
		    transform: translate(64px, 0) rotate(8deg);
		}
		53% {
		    transform: translate(-66px, 0) rotate(-8deg);
		}
		54% {
		    transform: translate(68px, 0) rotate(8deg);
		}
		55% {
		    transform: translate(-70px, 0) rotate(-8deg);
		}
		56% {
		    transform: translate(72px, 0) rotate(8deg);
		}
		57% {
		    transform: translate(-74px, 0) rotate(-8deg);
		}
		58% {
		    transform: translate(76px, 0) rotate(8deg);
		}
		59% {
		    transform: translate(-58px, 0) rotate(-8deg);
		}
		60% {
		    transform: translate(50px, 0) rotate(8deg);
		}
		61% {
		    transform: translate(-52px, 0) rotate(-8deg);
		}
		62% {
		    transform: translate(54px, 0) rotate(8deg);
		}
		63% {
		    transform: translate(-56px, 0) rotate(-8deg);
		}
		64% {
		    transform: translate(58px, 0) rotate(8deg);
		}
		65% {
		    transform: translate(-60px, 0) rotate(-8deg);
		}
		66% {
		    transform: translate(60px, 0) rotate(8deg);
		}
		67% {
		    transform: translate(-60px, 0) rotate(-8deg);
		}
		68% {
		    transform: translate(60px, 0) rotate(8deg);
		}
		69% {
		    transform: translate(-68px, 0) rotate(-8deg);
		}
		70% {
		    transform: translate(60px, 0) rotate(8deg);
		}
		71% {
		    transform: translate(-62px, 0) rotate(-8deg);
		}
	}
	.donghua {
		width: 100%;
		height: 650rpx;
		margin-top: 260rpx;
	}
}
</style>
